<template>
  <div>
    <div class="permission-info">
      <div>当前权限</div>
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            收银权限<i class="header-icon el-icon-info"></i>
            <el-switch disabled class="permission-switch" v-model="staffPermission.Pcash"/>
          </template>
          <div class="permission-text">允许进入收银台，使用收银台模块</div>
        </el-collapse-item>
        <el-collapse-item >
          <template slot="title">
            采购权限<i class="header-icon el-icon-info"></i>
            <el-switch disabled class="permission-switch" v-model="staffPermission.Ppurchase"/>
          </template>
          <div class="permission-text">允许进入进货界面，使用进退货模块</div>
        </el-collapse-item>
        <el-collapse-item >
          <template slot="title">
           运营权限<i class="header-icon el-icon-info"></i>
            <el-switch disabled class="permission-switch" v-model="staffPermission.Pplan"/>
          </template>
          <div class="permission-text">允许进入运营界面，使用运营模块</div>
        </el-collapse-item>
        <el-collapse-item >
          <template slot="title">
            授权权限<i class="header-icon el-icon-info"></i>
            <el-switch disabled class="permission-switch" v-model="staffPermission.Pimpower"/>
          </template>
          <div class="permission-text">允许向下属员工分配除经理权限以外的其它权限</div><br>
          <div class="permission-text">允许新增下属员工</div>
        </el-collapse-item>
        <el-collapse-item >
          <template slot="title">
            经理权限<i class="header-icon el-icon-info"></i>
            <el-switch disabled class="permission-switch" v-model="staffPermission.Proot"/>
          </template>
          <div class="permission-text">最高级别权限，允许使用所有模块</div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: "PersonalPermission",
  props:['permission'],
  data(){
    return {
      staffPermission:this.permission,
    }
  },
  created() {
    console.log(this.permission)
    console.log(this.staffPermission)
  }
}
</script>

<style scoped>
.permission-info{
  width: 100%;
}
.permission-text{
  float: left;
}
.permission-switch{
  float: right;
}
</style>
